<template>
  <div class="article-container">
    <!-- 头部 -->
    <van-nav-bar
      title="文章详情"
      fixed
      left-arrow
      class="article-info"
      @click-left="$router.back()"
    />
    <!-- 文章部分 -->
    <div class="detail">
      <h1 class="title">{{ article.title }}</h1>
      <van-cell center class="user-info">
        <template #icon>
          <van-image
            class="avatar"
            fit="cover"
            round
            :src="article.aut_photo"
          />
        </template>
        <template #title>
          <div class="name">{{ article.aut_name }}</div>
        </template>
        <template #label>
          <div class="pubdate">{{ article.pubdate | relativeTime }}</div>
        </template>
        <van-button
          :type="article.is_followed ? 'danger' : 'info'"
          :icon="article.is_followed ? '' : 'plus'"
          :loading="isFollowLoading"
          round
          size="small"
          class="follow-btn"
          @click="onFollow"
          >{{ article.is_followed ? "已关注" : "关注" }}</van-button
        >
      </van-cell>
      <!-- 文章详情 -->
      <div
        class="markdown-body"
        v-html="article.content"
        ref="article-content"
      ></div>
      <!-- 评论 -->
      <Comments
        :source="articleId"
        :list="commentlist"
        @updateCommentCount="totalCommentCount = $event"
      ></Comments>
    </div>
    <!-- 底部区域 -->
    <div class="article-bottom">
      <van-button
        type="default"
        round
        size="small"
        class="write-btn"
        @click="isShow = true"
        >写评论</van-button
      >
      <van-icon
        name="comment-o"
        :badge="totalCommentCount"
        color="#777"
        class="comment-icon"
      />
      <van-icon
        :name="article.is_collected ? 'star' : 'star-o'"
        :color="article.is_collected ? 'orange' : '#777'"
        @click="onCollect"
      ></van-icon>
      <van-icon
        :name="article.attitude === 1 ? 'good-job' : 'good-job-o'"
        :color="article.attitude === 1 ? 'red' : '#777'"
        @click="onLike"
      ></van-icon>
      <van-icon name="share" color="#777" class="share-icon"></van-icon>
    </div>
    <!-- 发布评论 -->
    <van-popup v-model="isShow" position="bottom">
      <PostComment
        :target="articleId"
        @post-success="onPostSuccess"
      ></PostComment>
    </van-popup>
  </div>
</template>

<script>
import 'github-markdown-css/github-markdown.css'
import '@/utils/dayjs'
import { getArticle, addCollect, deleteCollect, addLike, deleteLike } from '@/api/article'
import { ImagePreview } from 'vant'
import { followUser, unFollowUser } from '@/api/user'
import Comments from '@/components/article-comment'
import PostComment from '@/components/post-comment'

export default {
  data() {
    return {
      article: {},
      isFollowLoading: false,
      isCollectLoading: false,
      isShow: false,
      commentlist: [],
      totalCommentCount: 0
    }
  },
  props: {
    articleId: {
      type: [String, Number, Object],
      required: true
    }
  },
  created() {
    this.getArticle()
  },
  components: {
    Comments,
    PostComment
  },
  methods: {
    async getArticle() {
      const { data } = await getArticle(this.articleId)
      this.article = data.data
      this.$nextTick(() => {
        this.imgPreview()
      })
    },
    imgPreview() {
      const articleContent = this.$refs['article-content']
      const imgs = articleContent.querySelectorAll('img')
      const images = []
      imgs.forEach(function (el, index) {
        images.push(el.src)
        el.onclick = function () {
          ImagePreview({
            images,
            startPosition: index
          })
        }
      })
    },
    async onFollow() {
      this.isFollowLoading = true
      try {
        if (this.article.is_followed) {
          await unFollowUser(this.article.aut_id)
        } else {
          await followUser(this.article.aut_id)
        }
        this.article.is_followed = !this.article.is_followed
      } catch (err) {
        if (err.response && err.response.status === 400) {
          this.$toast('你不能关注你自己')
        }
      }
      this.isFollowLoading = false
    },
    async onCollect() {
      this.$toast.loading({
        message: '操作中',
        forbidClick: true
      })
      try {
        if (this.article.is_collected) {
          await deleteCollect(this.articleId)
        } else {
          await addCollect(this.articleId)
        }
        this.article.is_collected = !this.article.is_collected
        this.$toast.success(`${this.article.is_collected ? '' : '取消'}收藏成功`)
      } catch (err) {
        this.$toast.fail('登录收藏')
      }
    },
    async onLike() {
      this.$toast.loading({
        message: '操作中',
        forbidClick: true
      })
      try {
        if (this.article.attitude === 1) {
          await deleteLike(this.articleId)
          this.article.attitude = -1
        } else {
          await addLike(this.articleId)
          this.article.attitude = 1
        }
        this.$toast.success(`${this.article.attitude === 1 ? '' : '取消'}点赞成功`)
      } catch (err) {
        this.$toast.fail('登陆点赞')
      }
    },
    onPostSuccess(comment) {
      this.commentlist.unshift(comment)
      this.totalCommentCount++
      this.isShow = false
    }
  }
}
</script>

<style lang="less" scoped>
.article-container {
  .article-info {
    background-color: #3196fa;
    /deep/ .van-icon,
    /deep/ .van-nav-bar__title {
      color: #fff;
    }
  }
  .title {
    font-size: 20px;
    color: #3a3a3a;
    padding: 14px;
    background-color: #fff;
    margin: 0;
  }
  .user-info {
    .name {
      font-size: 12px;
      color: #333;
    }
    .pubdate {
      font-size: 11px;
      color: #b4b4b4;
    }
    .avatar {
      width: 35px;
      height: 35px;
      margin-right: 8px;
    }
    .follow-btn {
      width: 85px;
      height: 29px;
    }
  }
  .markdown-body {
    background-color: #fff;
  }
  .detail {
    position: fixed;
    left: 0;
    right: 0;
    top: 46px;
    bottom: 44px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;
    padding: 0 20px;
  }
  .article-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 44px;
    border-top: 1px solid #d8d8d8;
    background-color: #fff;
    .write-btn {
      width: 160px;
    }
    .comment-icon {
      bottom: -2px;
    }
    .share-icon {
      bottom: -2px;
    }
  }
}
</style>